import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Login from "@/views/Login/index.vue";
import Layout from "@/views/Layout/index.vue";
import Home from "@/views/Home/index.vue";
import Category from "@/views/Category/index.vue";
import SubCategory from '@/views/SubCategory/index.vue'
import TestRoute from "@/views/Test/index.vue";

const LayoutDetails=()=>import('@/views/Layout/index.vue')
import Detail from "@/views/Detail/index.vue";
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // history:createWebHashHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    // 这算一级路由
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: "",
          component: Home
        },
        {
          path: 'category/:id',
          component: Category,
        },
        // {
        //   path:'category/sbu/:id',
        //       component: SubCategory
        // },
        {
          path: 'category/sub/:id',
          component: SubCategory
        },
        {
          path:'detail/:id',
          component:Detail
        }

      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path:'/test',
      component:TestRoute
    }
  ],

/**
 * Vue Router 中用于控制页面滚动行为的配置选项。它允许你自定义路由切换时页面的滚动位置。
 * @returns 
 */
  scrollBehavior() {
    return {
      top:0,
      // 平滑滚动
      behavior:'smooth'
    }
  },







})

  /**
   * vue路由守卫
   * 
   */




router.beforeEach((to,from,next)=>{
  // to  ->到什么地方
  // from ->从什么地方来
  // console.log("获取to的数据");
  // console.log(to);
  // console.log(from);
  next();
  // if(to.path=='/test') {
  //   console.log("获取参数？");
    
  // // 正常跳转
  // next("/");
  // }else {
  //   next();
  // }

})

export default router
